<!DOCTYPE html>
<html>
<head>
<?php include(__DIR__ . '/../Public/header.php'); ?>
<link href="<?=PUB_PATH?>default/css/trade.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
<script  type="text/javascript" >
    var currency = JSON.parse('<?=json_encode($currency)?>');
</script>
</head>
<body class="skin-black fixed">
<?php include(__DIR__ . '/../Public/nav.php'); ?>
<div class="wrapper row-offcanvas row-offcanvas-left">
    <?php include(__DIR__ . '/../Public/left.php'); ?>
    <aside class="right-side trade-container" id='trade-container'>
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-lg-3 col-md-3">
                    <div class="panel general" id='markers-list'>
                        <header class="panel-heading tab-bg-dark-navy-blue">
                            <ul class="nav nav-tabs">
                                <?php foreach($trade_currency_market as $key=>$vlaue){ ?>
                                <li <?php if($currency['trade_currency_mark']==$vlaue['currency_mark']){ ?>class="active"<?php } ?> >
                                    <a data-toggle="tab" href="#market_<?=$vlaue['currency_mark']?>"><?=$vlaue['currency_mark']?></a>
                                </li>
                                <?php } ?>
                            </ul>
                        </header>
                        <div class="panel-body" style="height:595px;overflow:hidden;">
                            <div class="tab-content">
                                <?php foreach($trade_currency_market as $key=>$vlaue){ ?>
                                <div id="market_<?=$vlaue['currency_mark']?>" class="tab-pane <?php if($currency['trade_currency_mark']==$vlaue['currency_mark']){ ?>active<?php } ?>">
                                    <div class="row"><div class="col-lg-12"><input type="text" class="form-control" placeholder="<?=L('search',2)?>" ></div></div>
                                    <div style='height:540px;overflow:auto'>
                                        <table class="table table-hover" style="margin-bottom:0px;"  width="100%"></table>
                                    </div>
                                </div>
                                <?php } ?>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="panel">
                        <header class="panel-heading text-nowrap">
                            <?=$lang=='zh'?$currency['currency_name']:$currency['currency_mark']?>
                            <small class="text-muted" id='currencyInfo'></small>
                        </header>
                        <div class="panel-body" style="height:288px;">
                            <div id="chart" width="100%" height="268"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="panel has-error" style="position:relative;">
                                <header class="panel-heading control-label text-nowrap"><?=L('buy',1)?> <small class="text-muted" id="tradeCurrencyUse"></small></header>
                                <div class="panel-body" style="height:243px;">
                                    <form class="form-horizontal" role="form" id='buyForm' onsubmit="return false;" data-url='<?=url('buy')?>'>
                                        <div class="form-group">
                                            <label for="buyPrice" class="col-lg-4 col-sm-4 control-label"><?=L('buy_one',2)?></label>
                                            <div class="col-lg-7 col-sm-7"><p class="form-control-static"  id='buy_prize'><span></span> <?=$currency['trade_currency_mark']?>/<?=$currency['currency_mark']?></p></div>
                                        </div>
                                        <div class="form-group">
                                            <label for="buyPrice" class="col-lg-4 col-sm-4 control-label"><?=L('buy_price',2)?></label>
                                            <div class="col-lg-7 col-sm-7 input-relative">
                                                <input type="text" class="form-control" autocomplete='off' id="buyPrice" name="info[price]" placeholder="0.00000000" data-rule-required="true" data-rule-min="0">
                                                <!-- <p class="help-block">Example block-level help text here.</p> -->
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="buyNum" class="col-lg-4 col-sm-4 control-label"><?=L('buy_num',2)?></label>
                                            <div class="col-lg-7 col-sm-7 input-relative">
                                                <input type="text" class="form-control" autocomplete='off' id="buyNum" name="info[num]"  placeholder="0.00000000" data-rule-required="true" data-rule-min="0.001">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-4 col-sm-4 control-label"><?=L('buy_fee',2)?></label>
                                            <div class="col-lg-7 col-sm-7"><p class="form-control-static text-danger"><?=$currency['currency_buy_fee']?>%</p></div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-4 col-sm-4 control-label"><?=L('buy_volume',2)?></label>
                                            <div class="col-lg-7 col-sm-7"><p class="form-control-static" id='buyVolume'><span>0</span> <?=$currency['trade_currency_mark']?></p></div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-lg-offset-4 col-sm-offset-4">
                                                <button type="submit" class="btn btn-danger" ><?=L('buy',1)?></button>&nbsp;&nbsp;&nbsp;&nbsp;<a href="<?=url('ucenter/in')?>"><?=L('pay',1)?></a>   <a href="<?=$currency['trade_currency_id']==0?url('ucenter/out'):url('ucenter/index')?>"><?=L('withdraw',1)?></a>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <?php if(!$member) { ?>
                                <div class="no-login-mask"><div class="bg"></div><div class="btns"><a class="btn btn-success" href="<?=url('member/login')?>"><?=L('login',1)?></a>&nbsp;&nbsp;<a class="btn btn-danger" href="<?=url('member/reg')?>"><?=L('reg',1)?></a></div></div>
                                <?php } ?>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="panel has-success" style="position:relative;">
                                <header class="panel-heading control-label text-nowrap"><?=L('sell',1)?> <small class="text-muted" id="currencyUse"></small></header>
                                <div class="panel-body" style="height:243px;">
                                    <form class="form-horizontal" role="form" id='sellForm' onsubmit="return false;" data-url='<?=url('sell')?>'>
                                        <div class="form-group">
                                            <label for="buyPrice" class="col-lg-4 col-sm-4 control-label"><?=L('sell_one',2)?></label>
                                            <div class="col-lg-7 col-sm-7"><p class="form-control-static" id='sell_prize'><span></span> <?=$currency['currency_mark']?>/<?=$currency['trade_currency_mark']?></p></div>
                                        </div>
                                        <div class="form-group">
                                            <label for="sellPrice" class="col-lg-4 col-sm-4 control-label"><?=L('sell_price',2)?></label>
                                            <div class="col-lg-7 col-sm-7 input-relative">
                                                <input type="text" class="form-control" autocomplete='off' name="info[price]" id="sellPrice" data-rule-required="true" data-rule-min="0" placeholder="0.00000000" value="">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="sellNum" class="col-lg-4 col-sm-4 control-label"><?=L('sell_num',2)?></label>
                                            <div class="col-lg-7 col-sm-7 input-relative">
                                                <input type="text" class="form-control" autocomplete='off' name="info[num]" id="sellNum" data-rule-required="true" data-rule-min="0.001" placeholder="0.00000000" value="">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-4 col-sm-4 control-label"><?=L('sell_fee',2)?></label>
                                            <div class="col-lg-7 col-sm-7"><p class="form-control-static text-success"><?=$currency['currency_sell_fee']?>%</p></div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-4 col-sm-4 control-label"><?=L('sell_volume',2)?></label>
                                            <div class="col-lg-7 col-sm-7"><p class="form-control-static" id='sellVolume'><span>0</span> <?=$currency['currency_mark']?></p></div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-lg-offset-4 col-sm-offset-4">
                                                <button type="submit" class="btn btn-success" ><?=L('sell',1)?></button>&nbsp;&nbsp;&nbsp;&nbsp;<a href="<?=url('ucenter/in')?>"><?=L('pay',1)?></a>  <a href="<?=url('ucenter/index')?>"><?=L('withdraw',1)?></a>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <?php if(!$member) { ?>
                                <div class="no-login-mask"><div class="bg"></div><div class="btns"><a class="btn btn-success" href="<?=url('member/login')?>"><?=L('login',1)?></a>&nbsp;&nbsp;<a class="btn btn-danger" href="<?=url('member/reg')?>"><?=L('reg',1)?></a></div></div>
                                <?php } ?>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-danger">
                                <header class="panel-heading"><?=L('buy_order',1)?></header>

                                <div class="panel-body table-responsive" style="height:266px;">
                                    <table class="table table-hover" style="margin-bottom:0px;" id='buyList'></table>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="panel panel-success">
                                <header class="panel-heading"><?=L('sell_order',1)?></header>
                                <div class="panel-body table-responsive"  style="height:266px;">
                                    <table class="table table-hover" style="margin-bottom:0px;" id='sellList'></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <?php if($member) { ?>
                <div class="col-md-6">
                    <section class="panel">
                        <header class="panel-heading">
                            <ul class="nav nav-tabs">
                                <li class="active" ><a data-toggle="tab" href="#my_order"><?=L('my_order',1)?></a></li>
                                <li><a data-toggle="tab" href="#my_history" data-url='<?=url('ucenter/get_order',array('status'=>'completed','size'=>8,'currency_id'=>$currency['currency_id']))?>'><?=L('my_history',1)?></a></li>
                            </ul>
                        </header>
                        <div class="panel-body table-responsive" style="height:435px;">
                            <div class="tab-content">
                                <div id="my_order" class="tab-pane active">
                                    <table class="table table-hover" id='myOrderList'></table>
                                </div>
                                <div id="my_history" class="tab-pane">
                                    <div id='myHistoryList'></div>
                                </div>
                            </div>
                            
                        </div>
                    </section>
                </div>
                <?php } ?>
                <div class="<?=$member?'col-md-6':'col-md-12'?>">
                    <section class="panel">
                        <header class="panel-heading"><?=L('trade_history',1)?></header>
                        <div class="panel-body table-responsive"  style="height:435px;">
                            <table class="table table-hover" id='orderList'>
                                
                            </table>
                        </div>
                    </section>
                </div><!--end col-12 -->
            </div>
        <!-- row end -->
        </section><!-- /.content -->
        <?php include(__DIR__ . '/../Public/copyright.php'); ?>
    </aside><!-- /.right-side -->
</div><!-- ./wrapper -->

<div aria-hidden="true" role="dialog" tabindex="-1" id="buyConfirm" class="modal fade">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title"><?=L('buy_confirm',1)?></h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-offset-1 col-lg-10">
                        <form class="form-horizontal"  role="form" onsubmit="return false;">
                            <div class="form-group">
                                <label class="col-lg-4 control-label" style="text-align:left;"><?=L('buy_price',2)?></label>
                                <div class="col-lg-8">
                                    <div class="input-group">
                                        <input type="text" class="form-control confirm_price" value='0.00000000' disabled>
                                        <span class="input-group-addon" ><?=$currency['trade_currency_mark']?></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-4 control-label" style="text-align:left;"><?=L('buy_num',2)?></label>
                                <div class="col-lg-8">
                                    <div class="input-group">
                                        <input type="text" class="form-control confirm_num" value='0.00000000' disabled>
                                        <span class="input-group-addon"><?=$currency['currency_mark']?></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-4 control-label" style="text-align:left;"><?=L('buy_fee',2)?></label>
                                <div class="col-lg-8">
                                    <div class="input-group">
                                        <input type="text" class="form-control confirm_fee" value='0.00000000' disabled>
                                        <span class="input-group-addon">&nbsp;&nbsp;%&nbsp;&nbsp;</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-4 control-label" style="text-align:left;"><?=L('buy_volume',2)?></label>
                                <div class="col-lg-8">
                                    <div class="input-group">
                                        <input type="text" class="form-control confirm_volume" value='0.00000000' disabled>
                                        <span class="input-group-addon"><?=$currency['trade_currency_mark']?></span>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="alert alert-danger" role="alert"><?=L('order_notice')?></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><?=L('close',2)?></button>
                <button type="button" class="btn btn-primary confirm_btn"><?=L('confirm',2)?></button>
            </div>
        </div>
    </div>
</div>

<div aria-hidden="true" role="dialog" tabindex="-1" id="sellConfirm" class="modal fade">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title"><?=L('sell_confirm',1)?></h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-offset-1 col-lg-10">
                        <form class="form-horizontal"  role="form" onsubmit="return false;">
                            <div class="form-group">
                                <label class="col-lg-4 control-label" style="text-align:left;"><?=L('sell_price',2)?></label>
                                <div class="col-lg-8">
                                    <div class="input-group">
                                        <input type="text" class="form-control confirm_price" value='0.00000000' disabled>
                                        <span class="input-group-addon"><?=$currency['trade_currency_mark']?></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-4 control-label" style="text-align:left;"><?=L('sell_num',2)?></label>
                                <div class="col-lg-8">
                                    <div class="input-group">
                                        <input type="text" class="form-control confirm_num" value='0.00000000' disabled>
                                        <span class="input-group-addon"><?=$currency['currency_mark']?></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-4 control-label" style="text-align:left;"><?=L('sell_fee',2)?></label>
                                <div class="col-lg-8">
                                    <div class="input-group">
                                        <input type="text" class="form-control confirm_fee" value='0.00000000' disabled>
                                        <span class="input-group-addon">&nbsp;&nbsp;%&nbsp;&nbsp;</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-4 control-label" style="text-align:left;"><?=L('sell_volume',2)?></label>
                                <div class="col-lg-8">
                                    <div class="input-group">
                                        <input type="text" class="form-control confirm_volume" value='0.00000000' disabled>
                                        <span class="input-group-addon"><?=$currency['trade_currency_mark']?></span>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="alert alert-danger" role="alert"><?=L('order_notice')?></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><?=L('close',2)?></button>
                <button type="button" class="btn btn-primary confirm_btn"><?=L('confirm',2)?></button>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id='myOrderListTpl'>
    <thead>
        <tr>
            <th width="13%"><?=L('trade_time',2)?></th>
            <th width="13%"><?=L('type',2)?></th>
            <th><?=L('trade_price',2)?>(<?=$currency['trade_currency_mark']?>)</th>
            <th width="13%"><?=L('trade_num',2)?>(<?=$currency['currency_mark']?>)</th>
            <th width="13%"><?=L('trade_overplus',2)?>(<?=$currency['currency_mark']?>)</th>
            <th width="13%"><?=L('trade_total',2)?>(<?=$currency['trade_currency_mark']?>)</th>
            <th width="5%"><?=L('action',2)?></th>
        </tr>
    </thead>
    <tbody>
        <%_.each(list,function(item){%>
        <tr>
          <td><%= item.addtime %></td>
          <td><%if(item.type=='sell'){%><span class="text-success"><?=L('_sell',1)?></span><%}else{%><span class="text-danger"><?=L('_buy',1)?></span><%}%></td>
          <td><%if(item.type=='sell'){%><span class="text-success"><%= item.price %></span><%}else{%><span class="text-danger"><%= item.price %></span><%}%></td>
          <td><%= item.num %></td>
          <td><%= formatMoney(accSub(item.num,item.trade_num),8,'','') %></td>
          <td><%= formatMoney(accMul(item.num,item.price),8,'','') %></td>
          <td><a href="javascript:;" data-url="<?=url('market/del')?>/orders_id/<%=item.orders_id %>" class="del"><?=L('cancel',2)?></a></td>
        </tr>
        <%})%>
    </tbody>
</script>
<script type="text/html" id='orderListTpl'>
    <thead>
        <tr>
            <th><?=L('trade_time',2)?></th>
            <th><?=L('type',2)?></th>
            <th width="20%"><?=L('trade_price',2)?>(<?=$currency['trade_currency_mark']?>)</th>
            <th width="20%"><?=L('trade_num',2)?>(<?=$currency['currency_mark']?>)</th>
            <th width="20%"><?=L('trade_total',2)?>(<?=$currency['trade_currency_mark']?>)</th>
        </tr>
    </thead>
    <tbody>
        <%_.each(list,function(item){%>
        <tr>
          <td><%= item.addtime %></td>
          <td><%if(item.type=='sell'){%><span class="text-success"><?=L('_sell',1)?></span><%}else{%><span class="text-danger"><?=L('_buy',1)?></span><%}%></td>
          <td><%if(item.type=='sell'){%><span class="text-success"><%= item.price %></span><%}else{%><span class="text-danger"><%= item.price %></span><%}%></td>
          <td><%= item.num %></td>
          <td><%= formatMoney(accMul(item.num,item.price),8,'','') %></td>
        </tr>
        <%})%>
    </tbody>
</script>
<script type="text/html" id='buyListTpl'>
    <thead>
        <tr>
            <th><?=L('ranking',2)?></th>
            <th><?=L('trade_price',2)?>(<?=$currency['trade_currency_mark']?>)</th>
            <th><?=L('trade_num',2)?>(<?=$currency['currency_mark']?>)</th>
            <!-- <th><?=L('trade_yes_or_no',2)?></th> -->
            <th><?=L('trade_total',2)?>(<?=$currency['trade_currency_mark']?>)</th>
        </tr>
    </thead>
    <tbody>
        <%_.each(list,function(item,ind){%>
        <tr>
            <td><span class="text-danger"><%= (ind+1) %></span></td>
            <td style="cursor:pointer"><span class="text-danger"><%= item.price %></span></td>
            <td style="cursor:pointer"><%= formatMoney(accSub(item.num,item.trade_num),8,'','') %></td>
            <!-- <td><%= item.trade_num %> / <%= formatMoney(accSub(item.num,item.trade_num),8,'','') %></td> -->
            <td><%= formatMoney(accMul(item.num,item.price),8,'','') %></td>
        </tr>
        <%})%>
    </tbody>
</script>
<script type="text/html" id='sellListTpl'>
    <thead>
        <tr>
            <th><?=L('ranking',2)?></th>
            <th><?=L('trade_price',2)?>(<?=$currency['trade_currency_mark']?>)</th>
            <th><?=L('trade_num',2)?>(<?=$currency['currency_mark']?>)</th>
            <!-- <th><?=L('trade_yes_or_no',2)?></th> -->
            <th><?=L('trade_total',2)?>(<?=$currency['trade_currency_mark']?>)</th>
        </tr>
    </thead>
    <tbody>
        <%_.each(list,function(item,ind){%>
        <tr>
            <td><span class="text-success"><%= (ind+1) %></span></td>
            <td style="cursor:pointer"><span class="text-success"><%= item.price %></span></td>
            <td style="cursor:pointer"><%= formatMoney(accSub(item.num,item.trade_num),8,'','') %></td>
            <!-- <td><%= item.trade_num %> / <%= formatMoney(accSub(item.num,item.trade_num),8,'','') %></td> -->
            <td><%= formatMoney(accMul(item.num,item.price),8,'','') %></td>
        </tr>
        <%})%>
    </tbody>
</script>
<script type="text/html" id='currencyInfoTpl'>
    <?=L('new_price',2)?>：<%= formatMoney(currency['new_price'],8,'','') %>
    <?=L('24H_done_num',2)?>：<%= formatMoney(currency['24H_done_num'],8,'','') %>
    <?=L('24H_done_money',2)?>：<%= formatMoney(currency['24H_done_money'],8,'','') %>
    <?=L('highest',2)?>：<%= formatMoney(currency['max_price'],8,'','') %>
    <?=L('lowest',2)?>：<%= formatMoney(currency['min_price'],8,'','') %>
</script>
<script type="text/html" id='tradeCurrencyUseTpl'>
    <?=L('use',2)?>：<%= formatMoney(data['trade_currency_num'],8,'','') %> <?=$currency['trade_currency_mark']?>
    <?=L('lock',2)?>：<%= formatMoney(data['trade_currency_forzen_rmb'],8,'','') %> <?=$currency['trade_currency_mark']?>
</script>
<script type="text/html" id='currencyUseTpl'>
    <?=L('use',2)?>：<%= formatMoney(data['num'],8,'','') %> <?=$currency['currency_mark']?>
    <?=L('lock',2)?>：<%= formatMoney(data['forzen_num'],8,'','') %> <?=$currency['currency_mark']?>
</script>
<script type="text/html" id='tradeCurrencyListTpl'>
    <thead>
        <tr>
            <th><?=L('coin',2)?></th>
            <th><?=L('price',2)?></th>
            <th width="13%"><?=L('24H_change',2)?></th>
        </tr>
    </thead>
    <tbody>
        <%_.each(data,function(item){%>
        <tr>
          <td><a href="<%= item['url'] %>"><img src="<?=PUB_PATH?><%= item['currency_logo'] %>" width='16px' height='16px' class='pull-left' style='margin-top:2px;'>&nbsp;<%= item['currency_mark'] %></a></td>
          <td><span class="<% if(item['new_price_status']==1){ %>text-danger<% }else{ %>text-success<% } %>"><%= formatMoney(item['new_price'],8,'','') %> <% if(item['new_price_status']==1){ %> <i class="fa fa-long-arrow-up"></i><% }else{ %> <i class="fa fa-long-arrow-down"></i><% } %></span></td>
          <td><span class="<% if(item['24H_change']>0){ %>text-danger<% }else{ %>text-success<% } %>"><%= item['24H_change'] %>%</span></td>
        </tr>
        <%})%>
    </tbody>
</script>
<script type="text/html" id='myHistoryListTpl'>
    <table class="table table-hover" >
        <thead>
            <tr>
                <th width="13%"><?=L('trade_time',2)?></th>
                <th><?=L('type',2)?></th>
                <th ><?=L('trade_price',2)?></th>
                <th><?=L('trade_num',2)?></th>
                <th ><?=L('trade_overplus',2)?></th>
                <th><?=L('trade_total',2)?></th>
                <th><?=L('status',2)?></th>
            </tr>
        </thead>
        <tbody>
            <%_.each(data.list,function(item){%>
            <tr>
                <td><%= item.addtime %></td>
                <td><%if(item.type=='sell'){%><span class="text-success"><?=L('_sell',1)?></span><%}else{%><span class="text-danger"><?=L('_buy',1)?></span><%}%></td>
                <td><%= item.price %></td>
                <td><%= item.num %></td>
                <td><%= formatMoney(accSub(item.num,item.trade_num),8,'','') %></td>
                <td><%= formatMoney(accMul(item.num,item.price),8,'','') %></td>
                <td>
                    <% if(item.status==0){%>
                    <span class="badge bg-light-blue"><?=L('order',2)?></span>
                    <% }else if(item.status==1){%>
                    <span class="badge bg-light-blue"><?=L('trading',2)?></span>
                    <% }else if(item.status==2){%>
                    <span class="badge bg-green"><?=L('traded',2)?></span>
                    <% }else if(item.status==-1){%>
                    <span class="badge bg-red"><?=L('cancel',2)?></span>
                    <%}%>
                </td>
            </tr>
            <%})%>
        </tbody>
    </table>
    <div class="table-foot"><%=data.page%></div>
</script>
<?php include(__DIR__ . '/../Public/footer.php'); ?>
<script src="<?=PUB_PATH?>default/js/highstock/highstock.js" type="text/javascript"></script>
<script src="<?=PUB_PATH?>default/js/highstock/modules/drag-panes.js"></script>
<script src="<?=PUB_PATH?>default/js/highstock/indicators/indicators.js"></script>
<script src="<?=PUB_PATH?>default/js/highstock/indicators/volume-by-price.js"></script>
<script src="<?=PUB_PATH?>default/js/reconnecting-websocket.min.js"></script>
<script type="text/javascript" >
$(function(){
    var websocket = new ReconnectingWebSocket('<?=$wsslink?>');
    websocket.onopen = function (evt) {
        websocket.running = true;
        console.log("Connection open...");
        data = {"currency_id":"<?=$currency['currency_id']?>","trade_currency_id":"<?=$currency['trade_currency_id']?>","member_id":"<?=isset($member['member_id'])?$member['member_id']:0?>","token":"<?=$token?>"};
        websocket.send(JSON.stringify(data));
    };

    websocket.onclose = function (evt) {
        console.log("Disconnected");
        // window.location.reload();
    }; 

    websocket.onmessage = function (evt) { 
        orderList(evt.data);
        buyList(evt.data);
        sellList(evt.data);
        setKline(evt.data);
        myOrder(evt.data);
    }; 

    websocket.onerror = function (evt, e) {
        console.log('Error occured: ' + evt.data);
    };

    var groupingUnits = [[
        'week',                         // unit name
        [1]                             // allowed multiples
    ], [
        'month',
        [1, 2, 3, 4, 6]
    ]];
    function afterSetExtremes(e) {
        // var chart = $('#container').highcharts();
        // chart.showLoading('Loading data from server...');
        // $.getJSON('https://www.highcharts.com/samples/data/from-sql.php?start=' + Math.round(e.min) +
        //           '&end=' + Math.round(e.max) + '&callback=?', function (data) {
        //     chart.series[0].setData(data);
        //     chart.hideLoading();
        // });
    }
    var myChart = Highcharts.stockChart('chart', {
        // colors: ['#F01717', '#416C9E', '#DDDF0D', '#7798BF', '#55BF3B', '#DF5353', '#aaeeee', '#ff0066', '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
        lang: {
            loading: 'Loading...',
            months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
            decimalPoint: '.',
            numericSymbols: ['k', 'M', 'G', 'T', 'P', 'E'],
            resetZoom: 'Reset zoom',
            resetZoomTitle: 'Reset zoom level 1:1',
            thousandsSep: ','
        },
        credits: {
            enabled: false,
        },
        chart: {
            height: 275
        },
        rangeSelector: {
            buttons: [
                {type: 'minute', count: 15, text: '15m'},
                {type: 'minute', count: 30, text: '30m'},
                {type: 'minute', count: 60, text: '1h'},
                {type: 'minute', count: 240,text: '4h'},
                {type: 'day',    count: 1,  text: '1d'},
                {type: 'all', text: 'All'}
            ],
            // inputDateFormat: '%Y-%m-%d %H:%I:%S',
            inputEnabled:false,
            // allButtonsEnabled: true,
            selected: 6
        },
        xAxis: { 
            type: 'datetime',
            events : {
                afterSetExtremes : afterSetExtremes
            },
            minRange: 3600 /4  //15分钟
        },
        plotOptions: { candlestick: {color: '#f01717', upColor: '#0ab92b'} },
        tooltip: { xDateFormat: '%Y-%m-%d %H:%M %A', color: '#f0f', changeDecimals: 8, borderColor: '#058dc7',padding:1,split: false,shared: true},
        yAxis: [{
            title: {
                text: '<?=L('price',2)?>',
                style: { color: '#CC3300' }
            },
            height: '70%',
            lineWidth: 2
        }, {
            title: {
                text: '<?=L('volume',2)?>',
                style: { color: '#4572A7' }
            },
            top: '70%',
            height: '15%',
            offset: 0,
            lineWidth: 2
        }],
        series: [
            {animation: false, type: 'candlestick',name: '<?=L('price',2)?>[<?=$currency['currency_mark']?>]',data: '',dataGrouping: {units: groupingUnits}},
            {animation: false, type: 'column',name: '<?=L('volume',2)?>[<?=$currency['currency_mark']?>]',data: '',yAxis:1,dataGrouping: {units: groupingUnits}},
            {name: 'MA5', data: '', type: 'spline', threshold: null, lineWidth: 1},
            {name: 'MA10', data: '', type: 'spline', threshold: null, lineWidth: 1},
            {name: 'MA20', data: '', type: 'spline', threshold: null, lineWidth: 1},
            {name: 'MA30', data: '', type: 'spline', threshold: null,  lineWidth: 1}
        ]
    });
    function orderList(data){
        var data = $.parseJSON(data);
        $('#orderList').html(
            _.template(
                $('#orderListTpl').html(),
                {variable: 'list'}
            )(data.history)
        );

        // $("#orderList").parent().slimscroll({
        //     height: ($("#orderList").parent().height()) + "px",
        //     color: "rgba(0,0,0,0.2)"
        // });
    }

    function buyList(data){
        var data = $.parseJSON(data);
        $('#buyList').html(
            _.template(
                $('#buyListTpl').html(),
                {variable: 'list'}
            )(data.buy)
        );

        // $("#buyList").parent().slimscroll({
        //     height: ($('#buyList').parent().height()) + "px",
        //     color: "rgba(0,0,0,0.2)"
        // });
    }

    function sellList(data){
        var data = $.parseJSON(data);
        $('#sellList').html(
            _.template(
                $('#sellListTpl').html(),
                {variable: 'list'}
            )(data.sell)
        );

        // $("#sellList").parent().slimscroll({
        //     height: ($('#sellList').parent().height()) + "px",
        //     color: "rgba(0,0,0,0.2)"
        // });
    }

    function myOrder(data){
        var data = $.parseJSON(data);
        if(data.member){
            $('#myOrderList').html(
                _.template(
                    $('#myOrderListTpl').html(),
                    {variable: 'list'}
                )(data.member.thust)
            );
            $('#currencyUse').html(
                _.template(
                    $('#currencyUseTpl').html(),
                    {variable: 'data'}
                )(data.member)
            );
            $('#tradeCurrencyUse').html(
                _.template(
                    $('#tradeCurrencyUseTpl').html(),
                    {variable: 'data'}
                )(data.member)
            );
        }else{
            $('#currencyUse').html(
                _.template(
                    $('#currencyUseTpl').html(),
                    {variable: 'data'}
                )(data.member)
            );
            $('#tradeCurrencyUse').html(
                _.template(
                    $('#tradeCurrencyUseTpl').html(),
                    {variable: 'data'}
                )(data.member)
            );
        }
        // $("#myOrderList").parent().slimscroll({
        //     height: ($("#myOrderList").parent().height()) + "px",
        //     color: "rgba(0,0,0,0.2)"
        // });
    }
    function splitData(rawData) {
        var categoryData = [];
        var values = [];
        var volumns = [];
        for (var i = 0; i < rawData.length; i++) {
            categoryData.push([
                parseInt(rawData[i][0]), // the date
                parseFloat(rawData[i][1]), // open
                parseFloat(rawData[i][2]), // high
                parseFloat(rawData[i][3]), // low
                parseFloat(rawData[i][4]) // close
            ]);
            values.push(rawData[i]);
            volumns.push([
                parseInt(rawData[i][0]), // the date
                parseFloat(rawData[i][5]) // the volume
            ]);
        }
        return {
            categoryData: categoryData,
            values: values,
            volumns: volumns
        };
    }

    function calculateMA(dayCount, data) {
        var result = [];
        for (var i = 0, len = data.values.length; i < len; i++) {
            if (i < dayCount) {
                // result.push('-');
                continue;
            }
            var sum = 0;
            for (var j = 0; j < dayCount; j++) {
                sum += parseFloat(data.values[i-j][1]);
            }
            result.push([data.values[i][0],+(sum / dayCount).toFixed(8)]);
        }
        return result;
    }

    var tableData = [];
    function setKline(data){
        var data = $.parseJSON(data);
        document.title = formatMoney(data.currency['new_price'],8,'','') +'<?=$currency['trade_currency_mark']?> <?=$currency['currency_mark']?>/<?=$currency['currency_name']?> <?=$setting['web_title']?>';
        if(data.klist.length>0){
            list = splitData(data.klist);
            myChart.series[0].setData(list.categoryData);
            myChart.series[1].setData(list.volumns);
            myChart.series[2].setData(calculateMA(5, list));
            myChart.series[3].setData(calculateMA(10, list));
            myChart.series[4].setData(calculateMA(20, list));
            myChart.series[5].setData(calculateMA(30, list));
        }
        if(data.currency){
            $('#buy_prize span').html(formatMoney(data.currency['buy_one_price'],8,'',''));
            $('#sell_prize span').html(formatMoney(data.currency['sell_one_price'],8,'',''));
            $('#currencyInfo').html(
                _.template(
                    $('#currencyInfoTpl').html(),
                    {variable: 'currency'}
                )(data.currency)
            );
            // $('#buyPrice').attr('data-rule-min',formatMoney(data.currency['buy_one_price']*0.9,8,'',''));
            $('#sellPrice').attr('data-rule-min',formatMoney(data.currency['sell_one_price']*0.4,8,'',''));
        }

        _.each(data.markets,function(index, el) {
            $('#market_'+el+' table').html(
                _.template(
                    $('#tradeCurrencyListTpl').html(),
                    {variable: 'data'}
                )(index)
            );
            // console.log(el);
            if(!tableData[el]){
                tableData[el] = $('#market_'+el+' table').DataTable({
                    'sDom':"t",
                    'ordering': true,//是否启用排序
                    'searching': true,//搜索
                    'bStateSave': true,
                    'autoWidth': true,
                    'paging': false,
                    // 'scrollY': 485,
                });
            }else{
                tableData[el].destroy();
                tableData[el] = $('#market_'+el+' table').DataTable({
                    'sDom':"t",
                    'ordering': true,//是否启用排序
                    'searching': true,//搜索
                    'bStateSave': true,
                    'autoWidth': true,
                    'paging': false,
                    // 'scrollY': 485,
                });
            }
        });
    }



    $(window).resize(_.throttle(function(){
        $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
    }, 100));
    

    function buySum(){
        $price = $('#buyPrice').val();
        $num = $('#buyNum').val();
        $price = $price?$price:0;
        $num = $num?$num:0;
        $volume = accMul($price,$num);
        $('#buyVolume span').html(formatMoney($volume,8,'',''));
    }
    function sellSum(){
        $price = $('#sellPrice').val();
        $num = $('#sellNum').val();
        $price = $price?$price:0;
        $num = $num?$num:0;
        $volume = accMul($price,$num);
        $('#sellVolume span').html(formatMoney($volume,8,'',''));
    }
    $('#buyPrice,#buyNum').on('blur',function(){
        buySum();
    });
    // $('#buyPrice,#buyNum').on('keyup',function(){
    //     $(this).val( formatMoney($(this).val(),6,'','') );
    // });
    $('#sellPrice,#sellNum').on('blur',function(){
        sellSum();
    });
    // $('#sellPrice,#sellNum').on('keyup',function(){
    //     $(this).val( formatMoney($(this).val(),6,'','') );
    // });
    $('#buyList').on('click','tr td:nth-child(2) span',function(){
        $('#sellPrice').val(formatMoney($(this).html(),8,'',''));
        sellSum();
    });
    $('#buyList').on('click','tr td:nth-child(3)',function(){
        $('#sellNum').val(formatMoney($(this).html(),8,'',''));
        sellSum();
    });

    $('#sellList').on('click','tr td:nth-child(2) span',function(){
        $('#buyPrice').val(formatMoney($(this).html(),8,'',''));
        buySum();
    });
    $('#sellList').on('click','tr td:nth-child(3)',function(){
        $('#buyNum').val(formatMoney($(this).html(),8,'',''));
        buySum();
    });
    
    // $("#memberinfo").slimscroll({
    //     height: ($("#memberinfo").height()) + "px",
    //     color: "rgba(0,0,0,0.2)"
    // });

    $('#markers-list .tab-content input').on('keyup',function(){
        var me = $(this);
        me.parent().parent().parent().find('table').DataTable().search(
            me.val()
        ).draw();
    })

    $('#markers-list .nav-tabs li').on('click',function(){
        $(this).parent().parent().parent().parent().find('table').css('width','100%');
        // $($(this).attr('href')).DataTable().columns.adjust();
    })

    function myHistoryList(url,data){
        _.each(data,function(v,k){
            url +='/'+k+'/'+v;
        })
        $.get(url,function(data){
            $('#myHistoryList').html(
                _.template(
                    $('#myHistoryListTpl').html(),
                    {variable: 'data'}
                )(data)
            );
        })
    }
    $('[href="#my_history"]').on('click',function(){
        myHistoryList($(this).attr('data-url'));
    });
    $('#myHistoryList').on('click','.table-foot a',function(e){
        e.preventDefault();
        myHistoryList($(this).attr('href'));
    });
    

})

</script>
</body>
</html>